import { View } from "@tarojs/components";
import { Paragraph } from "@/components";
import { colors } from "@/data/shared/colors";
import style from "./index.module.scss";

export type TableShape = {
  key: string;
  value: string;
  // Due to late style addition
  secondRowHighlighted?: string | null;
};

type TableProps = {
  rowData: TableShape[];
};

const C14Table = ({ rowData }: TableProps) => {
  return (
    <View className={style["table"]}>
      {rowData.map((tableRow, tableRowIndex) => (
        <View key={tableRowIndex} className={style["table-row"]}>
          <View className={style["table-key"]}>
            <Paragraph noSpacing color={colors.colorDark}>
              {tableRow.key}
            </Paragraph>
          </View>
          <View className={style["table-value"]}>
            <Paragraph noSpacing>{tableRow.value}</Paragraph>
            {tableRow.secondRowHighlighted && (
              <Paragraph
                className={style["second-row-highlighted"]}
                color={colors.colorDark}
                noSpacing
              >
                {tableRow.secondRowHighlighted}
              </Paragraph>
            )}
          </View>
        </View>
      ))}
    </View>
  );
};

export default C14Table;
